<template>
  <div id="app" class="fCol w-h" style="overflow:hidden">
    <div style="height:70px;background:#367FA8;color:black;padding:0 20px;"
         class="fBetween"
         v-if="$route.path != '/switch/switchManagement'">
      <div class="fCenterY">
        <img src="../static/images/log1.png"
             style="width:40%">
      </div>
      <div class="fCenterY rPos">
        <img src="../static/images/men.png"
             class='cPointer'
             style="width:40px;margin-right:15px"
             @mouseover='setting.focus()'
             @click='setting.focus()'
             mouseout='window.setTimeout( ()=>setting.$children[0].blur(), 100)'>
        <div style="min-width:75px;font-size:15px;color: white;margin-right:12px">{{ userName }}</div>
        <img ref='z0'
             src='../static/images/exit.png'
             class='cPointer'
             style="width:30px;"
             z-hover='opacity: 0.7;'
             @click=' $confirm("确定要退出管理系统吗？","退出",{
                callback(a){
                    a === "confirm" && (
                        G.clearLocal(["roleId","roleName","loginName","userId","selectedMenu","menus"]),
                        $root.exit()
                    )
                }
            }) '>
        <mySelect
          son='setting'
          z:e-mouseover-1.el_select='console.error(@)'
          aref='z1'
          az::once-init=' @.querySelector(".el-input--suffix").style.zIndex = -777 '
          class='aPos'
          style='width:150px;top: 20px;left: -50%;margin-left: 64px;z-index:-777'
          anobody
          @select='mySet'
          myModel='selectSet'
          :data='["切换账号","修改密码"]'
        ></mySelect>
      </div>
    </div>

    <div class="flex w-h">
      <myMenu v-if="$route.path != '/switch/switchManagement'"
              style='height:100%;' class='fLeft2' mstyle='width: 150px;height: 100%;'
              :menus='menus' :menu='menu'
              bg='#545c64' color='#fff' active='#ffd04b'
              @open='console'
              @close='console'
              hook:mounted='console(myMenu)'
      ></myMenu>
      <router-view style='width: 100%;overflow: auto;'/>
    </div>

    <!--修改密码-->
    <myPassword
      son='myPassword'
      title='修改密码'
      @submit='doSubmit'
    ></myPassword>
  </div>
</template>

<script>
const G0 = G;
export default {
  ref: false,
  global: false,
  name: "App",
  data() {
    return {
      userName: localStorage.getItem('loginName'), //登录名,
      exitPic: ['../static/images/exit.png', '../static/images/exit-hover.png'],
      roleId: "",
      menu: '',
      menus: [
        {
          name: '用户管理',
          icon: 'el-icon-user',
          to: 'userManagement'
        },
        {
          name: '项目管理',
          icon: 'el-icon-menu',
          to: 'projectManagement',
        },
        {
          name: '项目管理',
          icon: 'el-icon-menu',
          to: 'projectManagement2',
        },
        {
          name: '项目信息汇总',
          icon: 'el-icon-menu',
          to: 'projectManagement3',
        },
        {
          name: '字典管理',
          icon: 'el-icon-bangzhu',
          to: 'helpManagement',
        },
        {
          name: '字典管理',
          icon: 'el-icon-bangzhu',
          to: 'helpManagement2',
        },
        {
          name: '操作日志',
          icon: 'el-icon-document',
          to: 'logManagement',
        },
        {
          name: '页面管理',
          icon: 'el-icon-picture-outline',
          to: 'swiperManagement',
          disabled: true,
        },
        {
          name: '意见反馈',
          icon: 'el-icon-position',
          to: 'feedBack',
        },
        {
          name: '切换',
          icon: 'el-icon-position',
          to: 'switchManagement',
          disabled: true,
        },

      ]
    };
  },
  methods: {
    //点击 切换账号 修改密码
    mySet(i) {
      // console.warn(i);
      this.selectSet = "";
      switch (i) {
        case 0:
          return this.$root.exit();
        case 1:
          this.myPassword.open();
      }
      ;
    },
    doSubmit(pass, son) {
      console.error(pass, pass.new);
      son.close();
    }
  },
  created() {
    this.$bindVue();
    this.roleId = localStorage.getItem("roleId");
    // localStorage.setItem("ip_baseUrl_online", ip_baseUrl_online);
    // localStorage.setItem("ip_baseUrl_bendi", ip_baseUrl_bendi);
    // localStorage.setItem("ip_file", ip_file);
  },
  mounted() {
    switch (this.roleId) {
      case "1":
        this.menus = [
          {
            name: '用户管理',
            icon: 'el-icon-user',
            to: 'userManagement'
          },
          {
            name: '项目管理',
            icon: 'el-icon-menu',
            to: 'projectManagement',
          },
          {
            name: '字典管理',
            icon: 'el-icon-bangzhu',
            to: 'helpManagement',
          },
          {
            name: '操作日志',
            icon: 'el-icon-document',
            to: 'logManagement',
          },
          {
            name: '页面管理',
            icon: 'el-icon-picture-outline',
            to: 'swiperManagement',
            disabled: true,
          },
          {
            name: '单位管理',
            icon: 'el-icon-position',
            to: 'unitsIndex',
          },
          {
            name: '施工单位管理',
            icon: 'el-icon-position',
            to: 'sgdwIndex',
          },
          {
            name: '意见反馈',
            icon: 'el-icon-position',
            to: 'feedBack',
          },
          {
            name: '切换',
            icon: 'el-icon-position',
            to: 'switchManagement'
          },]
        break;
      case "2":
        this.menus = [
          {
            name: '项目管理',
            icon: 'el-icon-menu',
            to: 'projectManagement2',
          },
          {
            name: '单位管理',
            icon: 'el-icon-position',
            to: 'unitsIndex',
          },
          {
            name: '施工单位管理',
            icon: 'el-icon-position',
            to: 'sgdwIndex',
          },
          {
            name: '字典管理',
            icon: 'el-icon-bangzhu',
            to: 'helpManagement2',
          },
          {
            name: '操作日志',
            icon: 'el-icon-document',
            to: 'logManagement',
          },
          {
            name: '切换',
            icon: 'el-icon-position',
            to: 'switchManagement'
          },]
        break;
      case "3":
        this.menus = [
          {
            name: '项目信息汇总',
            icon: 'el-icon-menu',
            to: 'projectManagement3',
          },
          {
            name: '项目管理',
            icon: 'el-icon-menu',
            to: 'projectManagement2',
          },
          {
            name: '单位管理',
            icon: 'el-icon-position',
            to: 'unitsIndex',
          },
          {
            name: '施工单位管理',
            icon: 'el-icon-position',
            to: 'sgdwIndex',
          },
          {
            name: '操作日志',
            icon: 'el-icon-document',
            to: 'logManagement',
          },
          {
            name: '切换',
            icon: 'el-icon-position',
            to: 'switchManagement'
          },]
        break;
    }
    const hashKeys = G.hashKeys;
    var path = this.$route.path;
    // console.error( path, hashKeys[path], hashKeys );
    if (hashKeys[path] === undefined) {
      path = path.split('/').item(-1);
      if (hashKeys[path] === undefined) return;
    }
    ;
    // this.userName = localStorage.getItem('loginName');
    this.menu = path;
  }
};
</script>

<style>
/*首页搜索框样式*/
#home_input {
  border: none !important;
}

/*登录页面swith开关*/
.el-switch__label {
  display: inline-block;
  text-align: right;
  vertical-align: middle;
  color: white;
  text-shadow: 2px 2px #000000;
}

.el-switch__label * {
  font-size: 16px;
}

.el-switch__label.is-active {
  color: white;
}

.el-switch.is-checked .el-switch__core {
  border-color: #0076bc;
  background-color: #0076bc;
}

/* 这是对elementui组件样式修改的css*/
/*所有弹框的“确定”按钮居中对齐*/
.el-dialog__footer {
  text-align: center;
}

/*wms项目stanard*/
.el-button--warning:active {
  background: #ffb800 !important;
}

.el-button--warning {
  background: #ffb800 !important;
}

.el-button--info:active {
  background: #e6e6e6 !important;
  color: #797979 !important;
}

.el-button--info {
  background: #e6e6e6 !important;
  color: #797979 !important;
}

.el-button--info:hover {
  opacity: 0.9;
  color: #fff;
}

.el-button--primary:active {
  background: #367FA8 !important;
}

.el-button--primary {
  background: #367FA8 !important;
}

.el-button--success:active {
  background: #009688 !important;
}

.el-button--success {
  background: #009688 !important;
}

.el-button--default:active {
  background: #7BB6D5 !important;
  color: #fff;
}

.el-button--default {
  background: #7BB6D5 !important;
  color: #fff;
}

.el-button--default:hover {
  opacity: 0.9;
  color: #fff;
}

.el-button--danger:active {
  background: #ff5722 !important;
}

.el-button--danger {
  background: #ff5722 !important;
}

.el-button:hover {
  opacity: 0.9;
}

/**/
/* 页面布局*/
.main_navigator {
  margin-top: 1px;
  padding: 15px 0px 0px 18px;
  background-color: #fff;
}

.navigator_span {
  font-size: 14px;
  cursor: pointer;
}

.navigator_span:hover {
  color: rgb(90, 160, 230);
}

.main_content {
  padding-top: 0px;
  padding-bottom: 5px;
  padding-left: 0px;
  padding-right: 0px;
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  background-color: #fff;
}

/**/
.el-collapse-item__header {
  height: 30px !important;
  /* 报价页面展开行的宽度*/
}

a.router-link-active {
  color: #ffd04b !important;
}

/*默认白色*/
a {
  color: #fff !important;
}

.el-menu-item i {
  color: inherit;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: #606266;
  font-family: Arial, 微软雅黑;
  font-weight: normal;
}

html,
#app {
  /*min-width: 1400px;*/
  width: 100%;
  height: 100%;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

* {
  margin: 0;
  padding: 0;

  list-style: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
}

button {
  cursor: pointer;
}

form {
  display: inline;
}

.el-input__prefix {
  left: 10px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.el-submenu .el-menu-item {
  height: 40px;
  line-height: 40px;
  padding: 0 45px;
  min-width: 200px;
}

.el-menu-item.is-active {
  color: #ddd !important;
  background-color: #367FA8 !important;
  /*background-color: #009688 !important;    */
}

.el-menu-item.is-active:hover {
  /*background-color: #3d4348 !important;*/
}

.el-menu {
  border-right: 0;
}

.el-tag {
  font-size: 10px;
}

.el-checkbox-group {
  font-size: 12px;
}

.el-tag + .el-tag[data-v-178cb97c] {
  margin-left: 0;
}

.el-tag {
  margin: 0 10px 10px 0;
}

.el-dialog__header {
  padding: 12px 20px 10px;
  background-color: rgb(248, 248, 248);
}

.el-dialog__footer {
  padding: 10px 20px 20px;
}

/* .el-checkbox {
  display: block;
  position: relative;
  white-space: nowrap;
}
.el-checkbox__label {
  padding-left: 10px;
  line-height: 19px;
  font-size: 14px;
} */
.diabox .el-dialog {
  width: 35% !important;
}

.el-upload--picture-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 98px;
  height: 98px;
  line-height: 96px;
  vertical-align: top;
}

.el-upload--picture-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 98px;
  height: 98px;
  line-height: 96px;
  vertical-align: top;
}

.el-upload-list--picture-card .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 98px;
  height: 98px;
  margin: 0 8px 8px 0;
  display: inline-block;
}

/* .el-checkbox__label {
  font-size: 12px !important;
} */
.textareas .el-textarea__inner {
  height: 80px !important;
  /* border: 1px solid #d5d5d5; */
}

.intworp .el-form-item {
  margin-bottom: 5px;
}

.el-dropdown .el-dropdown-link {
  color: #fff;
}

.el-submenu__title {
  font-size: 14px;
  color: #fff;
  padding: 0 20px;
  background: #428bca;
  cursor: pointer;
  -webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.el-submenu__title i {
  color: #fff;
}

.el-submenu__title:hover {
  color: #606266;
}

.el-submenu__title:hover i {
  color: #606266;
}

.tit-width .el-checkbox {
  display: inline-block;
}

.tit-width .el-checkbox__label {
  font-size: 14px !important;
}

.flexbox {
  display: flex;
}

.el-table td {
  border-bottom: 0;
}

.el-button.is-circle {
  border-radius: 50%;
  padding: 8px;
}

.intworp .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
}

.intworp .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #000;
  /* cursor: not-allowed; */
}

.search-box .el-input__inner {
  background: #fbfbfb;
  border: 1px solid #d5d5d5;
  border-radius: 0;
}

.inputBoxs .el-input__inner {
  width: 100%;
}

.selsctL1 .el-input__inner {
  width: 120px;
}

.stepText .el-step__title {
  font-size: 14px;
  line-height: 25px;
}

.el-step__head.is-success {
  color: #428bca;
  border-color: #428bca;
}

.el-step__title.is-success {
  color: #428bca;
}

.el-step__head.is-process {
  color: #999;
  border-color: #999;
}

.el-step__title.is-process {
  font-weight: 700;
  color: #999;
}

.inputmsg .el-radio-button__inner {
  width: 100%;
}

.codeDia .el-dialog--center .el-dialog__body {
  padding: 30px 30px 30px;
  box-sizing: border-box;
}

.el-dropdown .el-dropdown-link {
  color: #606266;
}

.el-dropdown {
  display: inline-block;
  position: relative;
  color: #606266;
  font-size: 16px;
}

.el-col-offset-0 {
  margin: 20px 2% 0 2% !important;
}

.el-col-offset-2 {
  margin: 20px 2% 0 2% !important;
}

.image[data-v-ec1967ec] {
  width: 100%;
  height: 150px;
  display: block;
}

.hello .el-popover {
  width: 80px;
  bottom: 45px;
  left: 0;
  right: 0;
  padding: 0;
  position: fixed !important;
  min-width: 80px !important;
  margin: auto;
}

.el-button--mini,
.el-button--mini.is-round {
  padding: 5px 10px;
}

/**table样式*/
/* .el-table th > .cell {
  text-align: center;
} */
.el-table .cell {
  /* text-align: center; */
  line-height: 40px;
}

.el-table .cell,
.el-table th div,
.el-table--border td:first-child .cell,
.el-table--border th:first-child .cell {
  padding-left: 10px;
  /* padding: 0 10px; */
}

/*打印表头错乱*/
body .el-table th.gutter {
  display: table-cell !important;
}

body .el-table colgroup.gutter {
  display: table-cell !important;
}

/**/
/*高亮当前行*/
/* .el-table tbody tr:hover > td {
  background: rgb(227, 250, 204) !important;
} */
/**/
.el-table .cell,
.el-table th div {
  padding-right: 10px;
  /*padding-right:0px*/
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-table td,
.el-table th {
  padding: 0px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}

.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #000;
}

.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #000;
}

.tab-box {
  margin-top: 10px;
  width: 100%;
  background: #fff;
  /* border-right: 1px  lightgray; */
  /* box-shadow: 0px 0px 1px 1px lightgray; */
}

.el-pagination {
  /*margin: 12px 1px 2px 0;*/
  /*text-align: right;*/
}

.tabtop .el-row {
  border-top: 1px #cccccc;
}

.tabtop .el-row .el-col {
  padding: 0px 20px;
  font-size: 16px;
  color: #333;
  border-left: 1px #cccccc;
  margin-left: -1px;
}

.tabtop .el-row:nth-last-child() .el-col {
  border-bottom: 1px solid #cccccc;
  border-right: 0;
}

.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #cccccc;
}

.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #cccccc;
}

.el-table--border,
.el-table--group {
  border: 1px solid #cccccc;
}

/*字体颜色*/
.el-table thead {
  color: #333;
  font-weight: 500;
}

/*修改 08-06*/
/* .el-button--mini,
.el-button--mini.is-round {
  padding: 5px 15px;
} */
.el-table td,
.el-table th {
  padding: 0px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}

/*轮播图*/
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-table {
  width: 100%;
  border: 1px solid #dfdfdf;
  border-bottom: none;
}

.el-table__fixed-right-patch {
  background: #e1e1e1 !important;
}

.el-table__body tr > td {
  background: #fafafa;
}

.el-table th {
  background: #e1e1e1 !important;
  color: #444 !important;
}

.el-table th:hover {
  background: #c1c1c1 !important;
}

.el-table .sort-caret.ascending {
  border-bottom-color: #909399;
}

.el-table .sort-caret.descending {
  border-top-color: #909399;
}

.el-table td, .el-table th.is-leaf {
  border-color: transparent;
}

.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid transparent !important;
  background: white;
}

.sortTable th {
  padding: 4px 0;
  /*padding: 6px 0;*/
}

.sortTable .el-table__body tr.current-row > td {
  background: #f9e3db !important;
  /*border-right: 1px solid #f9e3db;*/
  /*background: #f3e7ca !important;*/
}

.sortTable .el-table__body tr.current-row:hover > td {
  background: #f9e3db !important;
}

#singleSelectTable tr > th.el-table-column--selection > .cell {
  display: none;
}

#singleSelectTable .el-checkbox__inner {
  border-radius: 50%;
}

#mySplitPage {
  width: calc(100% - 0px);
  position: absolute;
  left: 0;
  bottom: -51px;
  z-index: 2000;
  background: white;
}

/*轮播图编辑*/
.el-upload-list--picture .el-upload-list__item {
  height: 250px;
  display: inline-block;
  padding: 20px 30px 10px 90px;
  margin: 0 8px;
}

.el-upload-list__item {
  width: 29.5%;
}

.el-upload-list--picture .el-upload-list__item-thumbnail {
  width: 454px;
  height: 210px;
}

/*改变下拉框选项的高度*/
.el-select-dropdown__item {
  height: 35px;
  line-height: 35px;
}

/*项目管理 新增 radio*/
.el-radio.is-bordered + .el-radio.is-bordered {
  margin-left: 0px;
}

.el-radio.is-bordered {
  /*width: 54%;*/
  margin-top: 10px;
}

.el-radio {
  margin-right: 0px;
}

/*复选框*/
.el-checkbox__label {
  padding-left: 5px !important;
  font-size: 14px !important;
}

.el-checkbox {
  margin-right: 5px !important
}

.el-textarea__inner {
  border: 1px solid #fff;
  resize: none;
  padding: 5px 5px 5px 40px;
}

/*项目管理 编辑权限 radio*/
.el-form-item__content {
  line-height: 40px !important
}

.el-radio {
  margin-right: 10px;
}

/*禁用 样式*/
#help .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  color: #606266;
}

#help .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
  color: #606266;
}

#help .el-textarea__inner {
  padding: 5px 15px 5px 15px;
  border: 1px solid #d4d4d4;
}

#help .el-form-item__label {
  font-size: 16px;
}

/*用户管理 编辑 input禁用*/
#userEdit .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  color: #606266;
}

/*项目管理 新增*/
#new_project .el-form-item__content {
  width: 380px;
}

/*报表详情 禁用*/
#radio_disabled .el-radio__input.is-disabled + span.el-radio__label {
  color: #606266;
}

#radio_disabled .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  background-color: #606266;
}

#radio_disabled .el-radio__input.is-checked .el-radio__inner {
  border-color: #fff;
  background: #fff;
}

#radio_disabled .el-radio__input.is-disabled .el-radio__inner, .el-radio__input.is-disabled.is-checked .el-radio__inner {
  background-color: #fff;
  border-color: #606266;
}

#radio_disabled .el-radio__label {
  font-size: 16px;
}

/*饼图*/
#myChart {
  padding-top: 30px;
  height: 370px !important;
}

/*项目管理员 项目管理模块 修改 规则提示*/
#pro2_edit_form .el-form-item {
  margin-bottom: 0 !important;
}

#pro2_edit_form .el-form-edit {
  margin-bottom: 22px !important;
}

#pro2_edit_form .el-form-edit2 {
  margin-top: 22px !important;
}

#login-form el-checkbox__label {
  font-size: 13px !important
}

/*模糊搜索 表单*/
#s_form .el-form-item {
  margin-bottom: 0px !important;
}

/*项目管理员 项目管理 详情*/
#sys_projectDetails .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 0 !important;
}

#sys_projectDetails .el-form-item {
  margin-bottom: 0 !important;
}

.el-button + .el-button {
  margin-left: 2px;
}

.table-c {
  padding: 5px;
  overflow: auto;
  margin-left: 2em;
}

.table-c table {
  border-right: 1px solid #d4d4d4;
  border-bottom: 1px solid #d4d4d4
}

.table-c table td {
  border-left: 1px solid #d4d4d4;
  border-top: 1px solid #d4d4d4
}

td, th {
  text-align: center;
}

#inner th {
  padding: 5px;
  box-sizing: content-box !important;
}

#inner td {
  padding: 16px 12px;
  box-sizing: content-box !important;
}

.el-pagination.is-background .el-pager li {
  border-radius: 50% !important;
}

.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev {
  background: transparent;
}
</style>

